import { useEffect, useState } from "react";
import { Button, RadioChangeEvent } from "antd";
import { Tag, Radio, Select } from "antd";
import { useNavigate } from "react-router-dom";
import { getQuestion, getTags } from "@/api/question";

const { CheckableTag } = Tag;

const questionsNumOptions = [
  {
    value: 10,
    label: "10题",
  },
  {
    value: 20,
    label: "20题",
  },
  {
    value: 30,
    label: "30题",
  },
  {
    value: 40,
    label: "40题",
  },
  {
    value: 50,
    label: "50题",
  },
];

const SelfTest = () => {
  const [selectedTags, setSelectedTags] = useState<string[]>(["全部"]);
  const navigate = useNavigate();
  const [difficulty, setDiffCulty] = useState<string>("");
  const [number, setNumber] = useState<number>(10);
  const [tags, setTags] = useState<string[]>([]);
  const [type, setType] = useState<string>("");

  useEffect(() => {
    getTags().then((data: any) => {
      const tags = data.map((it: any) => it.tagName) as string[];
      setTags(["全部", ...tags]);
    });
  }, []);

  const toPractice = () => {
    getQuestion({
      difficulty,
      number,
      type,
      tag: selectedTags[0],
    }).then((res) => {
      navigate("/practice", {
        state: {
          questions: res,
          difficulty,
          number,
          type,
          tag: selectedTags[0],
        },
      });
    });
  };

  return (
    <div style={{ padding: "15px" }}>
      <div>
        <span style={{ marginRight: "28px" }}>标签:</span>
        {tags.map((tag) => (
          <CheckableTag
            key={tag}
            checked={selectedTags.indexOf(tag) > -1}
            onChange={() => setSelectedTags([tag])}
          >
            {tag}
          </CheckableTag>
        ))}
      </div>
      <div style={{ marginTop: "30px" }}>
        <span style={{ marginRight: "35px" }}>难度:</span>
        <Radio.Group
          onChange={(e: any) => setDiffCulty(e.target.value)}
          value={difficulty}
        >
          <Radio value="">随机</Radio>
          <Radio value="简单">简单</Radio>
          <Radio value="中等">中等</Radio>
          <Radio value="困难">困难</Radio>
        </Radio.Group>
      </div>
      <div style={{ marginTop: "30px" }}>
        <span style={{ marginRight: "35px" }}>题型:</span>
        <Radio.Group
          onChange={(e: any) => setType(e.target.value)}
          value={type}
        >
          <Radio value="">全部</Radio>
          <Radio value="单选题">单选题</Radio>
          <Radio value="多选题">多选题</Radio>
          <Radio value="简答题">简答题</Radio>
          <Radio value="编程题">编程题</Radio>
        </Radio.Group>
      </div>
      <div style={{ marginTop: "30px" }}>
        <span style={{ marginRight: "8px" }}>出题数量:</span>
        <Select
          value={number}
          style={{ width: 120 }}
          onChange={(val: number) => setNumber(val)}
          options={questionsNumOptions}
        />
      </div>
      <div style={{ textAlign: "center", marginTop: "100px" }}>
        <Button onClick={toPractice} type="primary">
          随机练习
        </Button>
      </div>
    </div>
  );
};

export default SelfTest;
